<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/antd/4.16.3/antd.css"/> -->
		<!-- <link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/iview/3.5.5-rc.1/styles/iview.min.css" /> -->

		<script src="//vuejs.org/js/vue.min.js"></script>
		<!-- import stylesheet -->
		<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
		<!-- import iView -->
		<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
		    <!-- <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> -->
		    <!-- <script type="text/javascript" src="https://unpkg.com/vue@next"></script> -->
		    <!-- <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> -->
	</head>
	<body>
		<div id="app">
			 <i-Table :columns="columns" :data="data">
			   <template slot-scope="{ row, index }" slot="name">
			         <Input type="text" v-model="editName" v-if="editIndex === index" />
			         <span v-else>{{ row.name }}</span>
			       </template>
			   
			       <template slot-scope="{ row, index }" slot="age">
			         <Input type="text" v-model="editAge" v-if="editIndex === index" />
			         <span v-else>{{ row.age }}</span>
			       </template>
			   
			       <template slot-scope="{ row, index }" slot="birthday">
			         <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
			         <span v-else>{{ row.bor }}</span>
			       </template>
			   
			       <template slot-scope="{ row, index }" slot="address">
			         <textarea type="text" v-model="editAddress" v-if="editIndex === index" ></textarea>
			         <span v-else>{{ row.address }}</span>
			       </template>
			   
			       <template slot-scope="{ row, index }" slot="action">
			         <div v-if="editIndex === index">
			           <Button @click="handleSave(index)">保存</Button>
			           <Button @click="editIndex = -1">取消</Button>
			         </div>
			         <div v-else>
			           <Button @click="handleEdit(row, index)">操作</Button>
			         </div>
			       </template>
			  </i-Table>

		</div>

	</body>
	<!-- 	<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
	<script src="https://lib.baomitu.com/iview/3.5.5-rc.1/iview.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script>
		const vm = new Vue({
			el: "#app",
			data () {
			      return {
			        columns: [
			          {
			            title: '姓名',
			            slot: 'name',
						fixed: 'left'
			          },
			          {
			            title: '年龄',
			            slot: 'age'
			          },
			          {
			            title: '出生日期',
			            slot: 'birthday'
			          },
			          {
			            title: '地址',
			            slot: 'address'
			          },
			          {
			            title: '操作',
			            slot: 'action',
						fixed: 'right',
			          }
			        ],
			        data: [
			          {
			            name: '王小明',
			            age: 18,
			            birthday: '919526400000',
			            address: '北京市朝阳区芍药居'
			          },
			          {
			            name: '张小刚',
			            age: 25,
			            birthday: '696096000000',
			            address: '北京市海淀区西二旗'
			          },
			          {
			            name: '李小红',
			            age: 30,
			            birthday: '563472000000',
			            address: '上海市浦东新区世纪大道'
			          },
			          {
			            name: '周小伟',
			            age: 26,
			            birthday: '687024000000',
			            address: '深圳市南山区深南大道'
			          }
			        ],
			        editIndex: -1,  // 当前聚焦的输入框的行数
			        editName: '',  // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
			        editAge: '',  // 第二列输入框
			        editBirthday: '',  // 第三列输入框
			        editAddress: '',  // 第四列输入框
			      }
			    },
			    methods: {
			      handleEdit (row, index) {
					  console.log(index)
			        this.editName = row.name;
			        this.editAge = row.age;
			        this.editAddress = row.address;
			        this.editBirthday = row.birthday;
			        this.editIndex = index;
			      },
			      handleSave (index) {
			        this.data[index].name = this.editName;
			        this.data[index].age = this.editAge;
			        this.data[index].birthday = this.editBirthday;
			        this.data[index].address = this.editAddress;
			        this.editIndex = -1;
			      },
			      getBirthday (birthday) {
					  console.log(3)
			        const date = new Date(parseInt(birthday));
			        const year = date.getFullYear();
			        const month = date.getMonth() + 1;
			        const day = date.getDate();
			        return `${year}-${month}-${day}`;
			      }
			    },
				
		})
	</script>
</html>
